<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/global.css">

</head>

<body>

    <div id="app" v-infinite-scroll="load" style="height:100vh; overflow-x: auto;">
        <el-container>

            <el-header>
                <el-container>
                    <div>
                        <el-tabs v-model="menu1" @tab-click="handleClick">
                            <el-tab-pane label="首页" name="first"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <div>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div>
                        <el-dropdown split-button type="primary">
                            发布文章
                            <el-dropdown-menu>
                                <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <el-button type="primary" @click="open" plain>
                            <span>
                                登陆
                            </span>
                            <el-divider direction="vertical"></el-divider>
                            <span>
                                注册
                            </span>
                        </el-button>
                    </div>
                    <div v-if="{login:false}">
                        <el-dropdown>
                            <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>评论</el-dropdown-item>
                                <el-dropdown-item>赞和收藏</el-dropdown-item>
                                <el-dropdown-item>新增粉丝</el-dropdown-item>
                                <el-dropdown-item>私信</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <div><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
                    </div>
                </el-container>
            </el-header>
            <el-main>
                <el-container>
                    <div>
                        <el-card>
                            <ul class="left-card">
                                <li><el-button icon="el-icon-s-promotion">关注</el-button></li>
                                <li><el-button icon="el-icon-s-promotion" class="active">综合</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">前端</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">后端</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">Android</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">人工智能</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">开发工具</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">代码人生</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">阅读</el-button></li>
                                <li><el-button icon="el-icon-s-promotion">排行榜</el-button></li>
                            </ul>
                        </el-card>
                    </div>

                    <div>
                        <el-card>
                            <div>
                                <el-tabs v-model="menu2" @tab-click="handleClick">
                                    <el-tab-pane label="推荐"></el-tab-pane>
                                    <el-tab-pane label="最新"></el-tab-pane>
                                </el-tabs>
                            </div>


                            <ul>
                                <li v-for="i in count">
                                    <!-- <el-container style="border: 1px pink solid;"> -->
                                    <el-container>
                                        <el-main>
                                            <h3>答应我，不要再用console.log调试了</h3>
                                            <p>如果你，你想增加你的共组效率，并且往更高阶的前端迸发，条是的能路是必不可少的，另外deb…</p>
                                            <p>
                                                <el-link href="" target="_blank" icon="el-icon-user">dev</el-link>
                                                <el-divider direction="vertical"></el-divider>
                                                <span>
                                                    <i class="el-icon-view">29k</i>
                                                </span>
                                                <el-divider direction="vertical"></el-divider>

                                                <span>
                                                    <i class="el-icon-plus">173</i>
                                                </span>
                                            </p>
                                        </el-main>
                                        <el-aside width="200px" style="overflow: hidden;">
                                            <el-image style="width: 200px;" src="./img/article_pic0.image"
                                                :fit="fit"></el-image>
                                        </el-aside>
                                    </el-container>
                                    <el-divider direction="horizontal"></el-divider>
                                </li>
                            </ul>
                        </el-card>
                    </div>

                    <div>
                        <el-card>
                            <div slot="header">
                                <span><i class="el-icon-reading"></i>文章榜</span>
                                <el-button type="text">换一换</el-button>
                            </div>
                            <div>
                                <ol>
                                    <li v-for="item in 5">
                                        <el-link href="" target="_blank">避免代码混乱：代码规范选型…</el-link>
                                    </li>
                                </ol>
                            </div>
                            <el-divider direction="horizontal"></el-divider>
                            <div>
                                <el-link href="" target="_blank">查看更多</el-link>
                            </div>

                        </el-card>
                    </div>
                </el-container>
            </el-main>
        </el-container>
        <el-dialog :visible.sync="centerDialogVisible" width="35%">
            <span slot="title" class="dialog-header">
                <h3>
                    登陆博客畅享更多乐趣
                </h3>
                <el-divider direction="horizontal"></el-divider>
            </span>
            <el-container>
                <el-main>
                    <el-container direction=>
                        <el-main direction="vertical">
                            <h3>
                                验证码登陆&nbsp;/&nbsp;注册
                            </h3>
                            <el-input placeholder="请输入邮箱/手机号（国际号码加区号）" v-model="input" clearable>
                            </el-input>
                            <el-input placeholder="请输入密码" v-model="input" type="">
                                <span>忘记密码</span>
                            </el-input>
                            <el-container>
                                <el-button plain>注册</el-button>
                                <!-- <el-button type="primary" plain>注册</el-button> -->
                                <el-button type="primary">登陆</el-button>
                            </el-container>
                            <el-container>
                                <el-main>
                                    <p>其他登陆：
                                        <i class="el-icon-search"></i>
                                        <i class="el-icon-search"></i>
                                        <i class="el-icon-search"></i>
                                    </p>
                                </el-main>
                                <el-aside width="">
                                    <el-link href="" target="_blank">验证码登陆</el-link>
                                </el-aside>
                            </el-container>
                        </el-main>
                        <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
                        <el-aside direction="vertical" width="">
                            <h3>扫码登陆</h3>
                            <el-image style="width: 100px; height: 100px" :src="xxxxxx" :fit="fit"></el-image>
                            <p>打开微信APP</p>
                            <p>点击“右上角加号-扫一扫”登陆</p>
                        </el-aside>
                    </el-container>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <span>
                    注册登陆即表示同意
                </span>
                <el-link href="" target="_blank" type="primary">用户协议</el-link>
                <span>和</span>
                <el-link href="" target="_blank" type="primary">隐私协议</el-link>
            </span>
        </el-dialog>
    </div>

</body>

<script src="./js/index.js"></script>

</html>